<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 列表</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            color: #333;
        }
        h1 {
            color: #0066cc;
            border-bottom: 2px solid #0066cc;
            padding-bottom: 10px;
        }
        h2 {
            color: #0099cc;
            margin-top: 30px;
        }
        h3 {
            color: #00aadd;
        }
        .example {
            background-color: #f5f5f5;
            border-left: 4px solid #0066cc;
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 4px 4px 0;
        }
        .code {
            background-color: #f8f8f8;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            margin: 15px 0;
            overflow-x: auto;
            font-family: Consolas, Monaco, 'Andale Mono', monospace;
        }
        .note {
            background-color: #ffffd9;
            border-left: 4px solid #ffcc00;
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 4px 4px 0;
        }
        .preview {
            border: 1px solid #ddd;
            padding: 20px;
            margin: 15px 0;
            border-radius: 4px;
            background-color: #fff;
        }
        nav {
            background-color: #f8f8f8;
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        nav a {
            margin-right: 15px;
            text-decoration: none;
            color: #0066cc;
        }
        nav a:hover {
            text-decoration: underline;
        }
        ul.custom-square {
            list-style-type: square;
        }
        ol.custom-upper-alpha {
            list-style-type: upper-alpha;
        }
        ol.custom-lower-roman {
            list-style-type: lower-roman;
        }
        ol.custom-start {
            start: 5;
        }
        ol.custom-reversed {
            direction: rtl;
        }
        dl.custom dt {
            font-weight: bold;
            margin-top: 10px;
        }
        dl.custom dd {
            margin-left: 30px;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <nav>
        <a href="html5-basic-structure.html">基础结构</a>
        <a href="html5-text-tags.html">文本标签</a>
        <a href="html5-links-images.html">链接和图像</a>
        <a href="html5-lists.html">列表</a>
        <a href="html5-tables.html">表格</a>
        <a href="html5-forms.html">表单</a>
        <a href="html5-semantic-tags.html">语义化标签</a>
        <a href="html5-multimedia.html">多媒体标签</a>
    </nav>

    <h1>HTML5 列表</h1>
    
    <section>
        <h2>无序列表</h2>
        <div class="example">
            <h3>基本无序列表</h3>
            <div class="code">
                &lt;!-- 基本无序列表 --&gt;<br>
                &lt;ul&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;项目一&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;项目二&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;项目三&lt;/li&gt;<br>
                &lt;/ul&gt;
            </div>
            
            <div class="preview">
                <ul>
                    <li>项目一</li>
                    <li>项目二</li>
                    <li>项目三</li>
                </ul>
            </div>
        </div>
        
        <div class="example">
            <h3>自定义列表样式</h3>
            <div class="code">
                &lt;!-- 自定义列表样式 --&gt;<br>
                &lt;ul style="list-style-type: square;"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;方块项目&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;方块项目&lt;/li&gt;<br>
                &lt;/ul&gt;
            </div>
            
            <div class="preview">
                <ul class="custom-square">
                    <li>方块项目</li>
                    <li>方块项目</li>
                </ul>
            </div>
            
            <div class="note">
                <p><strong>可用的列表样式类型：</strong></p>
                <ul>
                    <li><code>disc</code> - 实心圆（默认）</li>
                    <li><code>circle</code> - 空心圆</li>
                    <li><code>square</code> - 实心方块</li>
                    <li><code>none</code> - 无标记</li>
                </ul>
            </div>
        </div>
        
        <div class="example">
            <h3>嵌套列表</h3>
            <div class="code">
                &lt;!-- 嵌套列表 --&gt;<br>
                &lt;ul&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;水果<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;苹果&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;香蕉&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;蔬菜<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;胡萝卜&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;菠菜&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;<br>
                &lt;/ul&gt;
            </div>
            
            <div class="preview">
                <ul>
                    <li>水果
                        <ul>
                            <li>苹果</li>
                            <li>香蕉</li>
                        </ul>
                    </li>
                    <li>蔬菜
                        <ul>
                            <li>胡萝卜</li>
                            <li>菠菜</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </section>
    
    <section>
        <h2>有序列表</h2>
        <div class="example">
            <h3>基本有序列表</h3>
            <div class="code">
                &lt;!-- 基本有序列表 --&gt;<br>
                &lt;ol&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;第一步&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;第二步&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;第三步&lt;/li&gt;<br>
                &lt;/ol&gt;
            </div>
            
            <div class="preview">
                <ol>
                    <li>第一步</li>
                    <li>第二步</li>
                    <li>第三步</li>
                </ol>
            </div>
        </div>
        
        <div class="example">
            <h3>自定义编号类型</h3>
            <div class="code">
                &lt;!-- 自定义编号类型 --&gt;<br>
                &lt;ol type="A"&gt; &lt;!-- A, B, C... --&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;项目 A&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;项目 B&lt;/li&gt;<br>
                &lt;/ol&gt;<br><br>
                
                &lt;ol type="i"&gt; &lt;!-- i, ii, iii... --&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;项目 i&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;项目 ii&lt;/li&gt;<br>
                &lt;/ol&gt;
            </div>
            
            <div class="preview">
                <ol class="custom-upper-alpha">
                    <li>项目 A</li>
                    <li>项目 B</li>
                </ol>
                
                <ol class="custom-lower-roman">
                    <li>项目 i</li>
                    <li>项目 ii</li>
                </ol>
            </div>
            
            <div class="note">
                <p><strong>可用的编号类型：</strong></p>
                <ul>
                    <li><code>1</code> - 数字（默认）</li>
                    <li><code>A</code> - 大写字母</li>
                    <li><code>a</code> - 小写字母</li>
                    <li><code>I</code> - 大写罗马数字</li>
                    <li><code>i</code> - 小写罗马数字</li>
                </ul>
            </div>
        </div>
        
        <div class="example">
            <h3>自定义起始编号</h3>
            <div class="code">
                &lt;!-- 自定义起始编号 --&gt;<br>
                &lt;ol start="5"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;项目五&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;项目六&lt;/li&gt;<br>
                &lt;/ol&gt;
            </div>
            
            <div class="preview">
                <ol start="5">
                    <li>项目五</li>
                    <li>项目六</li>
                </ol>
            </div>
        </div>
        
        <div class="example">
            <h3>反向编号</h3>
            <div class="code">
                &lt;!-- 反向编号 --&gt;<br>
                &lt;ol reversed&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;最后一步&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;倒数第二步&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;第一步&lt;/li&gt;<br>
                &lt;/ol&gt;
            </div>
            
            <div class="preview">
                <ol reversed>
                    <li>最后一步</li>
                    <li>倒数第二步</li>
                    <li>第一步</li>
                </ol>
            </div>
        </div>
    </section>
    
    <section>
        <h2>描述列表</h2>
        <div class="example">
            <h3>基本描述列表</h3>
            <div class="code">
                &lt;dl&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;dt&gt;咖啡&lt;/dt&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;dd&gt;热饮，由咖啡豆制成。&lt;/dd&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;dt&gt;牛奶&lt;/dt&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;dd&gt;白色液体饮料，富含钙质。&lt;/dd&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;dd&gt;常用于咖啡和茶中。&lt;/dd&gt;<br>
                &lt;/dl&gt;
            </div>
            
            <div class="preview">
                <dl class="custom">
                    <dt>咖啡</dt>
                    <dd>热饮，由咖啡豆制成。</dd>
                    
                    <dt>牛奶</dt>
                    <dd>白色液体饮料，富含钙质。</dd>
                    <dd>常用于咖啡和茶中。</dd>
                </dl>
            </div>
            
            <h3>使用说明：</h3>
            <ul>
                <li><strong>&lt;dl&gt;</strong> - 定义描述列表</li>
                <li><strong>&lt;dt&gt;</strong> - 定义术语（要描述的项目）</li>
                <li><strong>&lt;dd&gt;</strong> - 定义描述（项目的描述）</li>
                <li>一个术语可以有多个描述</li>
                <li>描述列表适合用于术语表、元数据、键值对等</li>
            </ul>
        </div>
    </section>
    
    <section>
        <h2>列表的组合使用</h2>
        <div class="example">
            <h3>不同类型列表的组合</h3>
            <div class="code">
                &lt;ol&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;准备材料<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;面粉 200g&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;鸡蛋 2个&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;牛奶 100ml&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;烹饪步骤<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ol type="a"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;混合所有材料&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;倒入平底锅&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;煎至两面金黄&lt;/li&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ol&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;<br>
                &lt;/ol&gt;
            </div>
            
            <div class="preview">
                <ol>
                    <li>准备材料
                        <ul>
                            <li>面粉 200g</li>
                            <li>鸡蛋 2个</li>
                            <li>牛奶 100ml</li>
                        </ul>
                    </li>
                    <li>烹饪步骤
                        <ol type="a">
                            <li>混合所有材料</li>
                            <li>倒入平底锅</li>
                            <li>煎至两面金黄</li>
                        </ol>
                    </li>
                </ol>
            </div>
        </div>
    </section>
    
    <section>
        <h2>列表的最佳实践</h2>
        <ul>
            <li>根据内容的性质选择适当的列表类型：
                <ul>
                    <li>无序列表用于项目没有特定顺序的内容</li>
                    <li>有序列表用于步骤、排名或顺序重要的内容</li>
                    <li>描述列表用于术语-定义对</li>
                </ul>
            </li>
            <li>保持列表结构的一致性和层次清晰</li>
            <li>避免过深的嵌套，通常不超过三层</li>
            <li>使用 CSS 自定义列表样式，而不是过度依赖 HTML 属性</li>
            <li>确保列表项内容简洁明了</li>
            <li>考虑使用列表组织导航菜单、目录和步骤说明</li>
        </ul>
    </section>
    
    <footer>
        <p>&copy; 2023 HTML5 学习指南。保留所有权利。</p>
    </footer>
</body>
</html>